<!--
 The BSD 3-Clause License

 Copyright 2022 - DATATRONiQ GmbH (https://datatroniq.com)
 Copyright (c) 2018-2022 Klaus Landsdorf (http://node-red.plus/)
 Copyright 2015,2016 - Mika Karaila, Valmet Automation Inc. (node-red-contrib-opcua)
 All rights reserved.
 node-red-contrib-iiot-opcua
-->

<script type="text/javascript">
  RED.nodes.registerType('OPCUA-IIoT-Node', {
    category: 'IIoT',
    color: '#ABCDEF',
    defaults: {
      injectType: {value: "", required: true},
      nodeId: {value: "", required: true},
      datatype: {value: ""},
      value: {value: ""},
      name: {value: ""},
      topic: {value: ""},
      showErrors: {value: false}
    },
    inputs: 1,
    outputs: 1,
    align: "left",
    icon: "icon.png",
    label: function () {
      return this.name || "Node";
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () {
      let node = this
      node.lookupItems = []

      let datatypeLookupButton = $("#node-lookup-datatype")
      let datatypeField = $("#node-input-datatype")

      datatypeLookupButton.on("click", function () {
        datatypeLookupButton.addClass('disabled')
        $.getJSON('opcuaIIoT/list/DataTypeIds', function (data) {
          datatypeLookupButton.removeClass('disabled')
          node.lookupItems = []

          $.each(data, function (i, entry) {
            node.lookupItems.push({value: entry.nodeId, label: entry.label})
          })

          datatypeField.autocomplete({
            source: node.lookupItems,
            minLength: 0,
            focus: function (event, ui) {
              datatypeField.val(ui.item.label);
              return false;
            },
            select: function (event, ui) {
              datatypeField.val(ui.item.label)
              return false;
            },
            close: function (event, ui) {
              datatypeField.autocomplete("destroy")
            }
          }).autocomplete("search", "")
        })
      })

      $('#node-input-injectType').change(function () {
        if ($(this).val() !== 'write') {
          $('node-input-value').hide()
        } else {
          $('node-input-value').show()
        }
      })
    }
  });
</script>

<script type="text/x-red" data-template-name="OPCUA-IIoT-Node">
    <div class="form-row" id="node-inject-type">
        <label for=""><i class="fa fa-repeat"></i> <span data-i18n="opcua-iiot-contrib.label.injectType"></span></label>
        <select id="node-input-injectType" type="text" style="width:140px;">
            <option value="inject" data-i18n="opcua-iiot-contrib.type-label.inject"></option>
            <option value="read" data-i18n="opcua-iiot-contrib.type-label.read"></option>
            <option value="write" data-i18n="opcua-iiot-contrib.type-label.write"></option>
            <option value="listen" data-i18n="opcua-iiot-contrib.type-label.listen"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-nodeId"><i class="icon-tasks"></i> <span data-i18n="opcua-iiot-contrib.label.nodeId"></span></label>
        <input type="text" id="node-input-nodeId" placeholder="ns=1;s=MySwitch or ns=1;i=1234">
    </div>
    <div class="form-row">
        <label for="node-input-datatype"><i class="icon-search"></i> <span data-i18n="opcua-iiot-contrib.label.datatype"></span></label>
        <input type="text" id="node-input-datatype" style="width:40%;" placeholder="i=2041">
        <a id="node-lookup-datatype" class="btn"><i id="node-lookup-topic-icon" class="fa fa-search"></i></a>
    </div>
    <div class="form-row">
        <label for="node-input-value"><i class="icon-tag"></i> <span data-i18n="opcua-iiot-contrib.label.value"></span></label>
        <input type="text" id="node-input-value" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-input-topic"><i class="icon-tag"></i> <span data-i18n="node-red:common.label.topic"></span></label>
        <input type="text" id="node-input-topic" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" placeholder="">
    </div>
    <hr>
    <div class="form-row">
        <label style="min-width:160px" for="node-input-showErrors"><i class="fa fa-exclamation-circle"></i>
        <span data-i18n="opcua-iiot-contrib.label.showErrors"></span></label>
        <input type="checkbox" id="node-input-showErrors" style="max-width:30px">
    </div>
</script>

<script type="text/x-red" data-help-name="OPCUA-IIoT-Node">
    <h2>OPC UA IIoT Node</h2>

    <p>The Node is to set up a flow with the Node-RED Inject node
    to give the OPC UA injectType, nodeId, and parameters.</p>

    <h3>Input</h3>
    <div>
        <strong>Event message:</strong>
        <ul>
            <li>payload (Value)
            <li>topic (Node-Id)
        </ul>
    </div>

    <h3>Output</h3>
    <div>
        <strong>Event message:</strong>
        <ul>
            <li>payload (payload or value)
            <li>topic (Node-Id)
            <li>datatype (node-opcua/OPC UA data type string)
            <li>nodetype (node)
        </ul>
    </div>

    <strong>Value</strong>
    <p>The value input is for writing a fixed value to the given OPC UA Node-Id.
    It overrides the given payload if it is not null. The value has to be in the ring of the data type.</p>

    <strong>Name</strong>
    <p>Name in the flow of Node-RED.</p>
</script>
